<template>
	<view>
		<form @submit.prevent="onSubmit" @reset="formReset">
		<view class="uni-title uni-common-pl" style="margin: 10px;">部门</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
							
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChange1" :value="index1" :range="array1" v-model="information.major" name="major">
						<view class="uni-input">{{array1[index1]}}</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="uni-title uni-common-pl" style="margin: 10px;">检查地点</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
							
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChange2" :value="index2" :range="array2" v-model="information.line" name="line">
						<view class="uni-input">{{array2[index2]}}</view>
					</picker>
				</view>
			</view>
		</view> 
		
		<view class="uni-title uni-common-pl" style="margin: 10px;">检查类别</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
							
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChange3" :value="index3" :range="array3" v-model="information.danger" name="danger">
						<view class="uni-input">{{array3[index3]}}</view>
					</picker>
				</view>
			</view>
		</view>
		
		<view class="uni-title uni-common-pl" style="margin: 10px;">检查日期</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					
				</view>
				<view class="uni-list-cell-db">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker>
				</view>
			</view>
		</view>
		
		<view class="uni-title uni-common-pl" style="margin: 10px;">审批人</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
							
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChange5" :value="index5" :range="array5" v-model="information.fault" name="fault">
						<view class="uni-input">{{array5[index5]}}</view>
					</picker>
				</view>
			</view>
		</view>
		
		<view class="uni-title uni-common-pl" style="margin: 10px;">检查人</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
								
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChange6" :value="index6" :range="array6" v-model="information.grade" name="grade">
						<view class="uni-input">{{array6[index6]}}</view>
					</picker>
				</view>
			</view>
		</view>
		
		<view class="uni-title uni-common-pl" style="margin: 10px;">问题描述</view>
		<view class="uni-title uni-common-pl"></view>
		<view class="uni-textarea" style="background-color: darkgrey; height: 1cm; margin: 10px;">
			<textarea placeholder-style="color:#C0C0C0" placeholder="请输入问题描述" v-model="information.details" name="details"/>
		</view>
		
		<view>
		    <button @click="onSubmit" type="submit" style="background-color: #3CB371; margin:10px;">提交表单</button>
		    <button @click="formReset" type="reset">重置表单</button>
		</view>
		
		
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
			            format: true
			        })
			return {
				date: currentDate,
				title: 'picker',
				array1: ['财务部','改造项目部'],
				index1: 0,
				array2: ['奥德赛'],
				index2: 0,
				array3: ['日常检查'],
				index3: 0,
				array4: ['位置对象'],
				index4: 0,
				array5: ['test'],
				index5: 0,
				array6: ['检查人'],
				index6: 0,
				information:{
					major:"",
					line:"",
					danger:"",
					location:"",
					fault:"",
					grade:"",
					details:"",
				},
				obj:null
			};
		},
		computed: {
		        startDate() {
		            return this.getDate('start');
		        },
		        endDate() {
		            return this.getDate('end');
		        }
		    },
		methods: {
			bindPickerChange1: function(e) {
			            console.log('picker发送选择改变，携带值为', e.detail.value)
			            this.index1 = e.detail.value
			        },
			bindPickerChange2: function(e) {
			           console.log('picker发送选择改变，携带值为', e.detail.value)
			           this.index2 = e.detail.value
			       },
			bindPickerChange3: function(e) {
			           console.log('picker发送选择改变，携带值为', e.detail.value)
			           this.index3 = e.detail.value
			       },
			bindPickerChange4: function(e) {
			           console.log('picker发送选择改变，携带值为', e.detail.value)
			           this.index4 = e.detail.value
			       },
			bindPickerChange5: function(e) {
			           console.log('picker发送选择改变，携带值为', e.detail.value)
			           this.index5 = e.detail.value
			       },
			bindPickerChange6: function(e) {
			           console.log('picker发送选择改变，携带值为', e.detail.value)
			           this.index6 = e.detail.value
			       },
			bindDateChange: function(e) {
			            this.date = e.detail.value
			        },
			onSubmit(e) {
			  e.preventDefault(); // 防止默认表单提交
			  console.log(this.information); // 从'message'对象中访问表单数据
			  this.obj = this.information; // 将表单数据分配给'obj'
			  uni.setStorageSync('formData1', this.obj); // 将表单数据保存在本地存储中
			  // 使用uni.navigateTo或其他导航方法导航到第二个页面
			  uni.navigateTo({
			  	url:"/pages/SafetyChecking/SafetyChecking"
			  })
			},
			formReset: function(e) {
							this.index1 = 0;
							    this.index2 = 0;
							    this.index3 = 0;
							    this.index4 = 0;
							    this.index5 = 0;
							    this.index6 = 0;
							    
							    this.information = {
							        major: "",
							        line: "",
							        danger: "",
							        location: "",
							        fault: "",
							        grade: "",
							        details: ""
							    };
						},
			getDate(type) {
			            const date = new Date();
			            let year = date.getFullYear();
			            let month = date.getMonth() + 1;
			            let day = date.getDate();
			
			            if (type === 'start') {
			                year = year - 60;
			            } else if (type === 'end') {
			                year = year + 2;
			            }
			            month = month > 9 ? month : '0' + month;
			            day = day > 9 ? day : '0' + day;
			            return `${year}-${month}-${day}`;
			        }
		}
	}
</script>

<style>
	.uni-list{
		margin: 10px;
		background-color: darkgray;
		height: 1cm;
		border: 1px;
		box-sizing: border-box;
	}
</style>
